<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>

</head>
<body>
<div id="app3">
    <!--预约场地的表单-->
    <el-dialog
            title="选择预约时间"
            :visible.sync="bookFielddialogVisible"
            width="40%"
    >
        <div class="block">
            <span class="demonstration">请选择日期</span>
            <br>
            <el-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
        </div>
        <br>
        <br>
        <div>
            <span class="demonstration">请选择开始时间和结束时间</span>
            <br>

            <el-time-select
                    placeholder="起始时间"
                    v-model="startTime"
                    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '21:30'
    }">
            </el-time-select>
            <el-time-select
                    placeholder="结束时间"
                    v-model="endTime"
                    :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '21:30',
      minTime: startTime
    }">
            </el-time-select>
        </div>
        <div >
            <br>
            <br>
        <el-button type="text" size="large"@click="submitbookField()" style="float: right">提交</el-button>
        </div>
        <br>
        <br>
        <br>
    </el-dialog>
    <!--我的预约折叠栏-->
    <el-drawer
            title="我的预约"
            :visible.sync="drawer1"
            :direction="direction1"
            :before-close="handleClose1"
            :size="size">
        <span>
            <el-table
                    :data="bookFieldTableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    max-height="500">
    <el-table-column
            label="用户ID"
            prop="userid">
    </el-table-column>
    <el-table-column
            label="场地名"
            prop="fieldname">
    </el-table-column>
     <el-table-column
             label="预定时间"
             prop="bookday">
    </el-table-column>
      <el-table-column
              label="开始时间"
              prop="starttime">
    </el-table-column>
     <el-table-column
             label="结束时间"
             prop="endtime">
    </el-table-column>
     <el-table-column
             label="审核状态"
             prop="fieldbookstate">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <!--<el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>-->
      </template>
      <template slot-scope="scope">
          <a v-if="scope.row.fieldbookstate=='预约成功'">

        <el-button
                size="mini"
                @click="enterField(scope.$index, scope.row)">使用</el-button>
         <el-button
                 size="mini"
                 @click="toComment(scope.$index, scope.row)" >评论</el-button>
       </a>
           <a v-if="scope.row.orderstate=='已使用'">
        <el-button
                size="mini"
                @click="quitField(scope.$index, scope.row)">退场</el-button></a>
      </template>
    </el-table-column>
  </el-table>

        </span>
    </el-drawer>

    <!--我的评论折叠栏-->
    <el-drawer
            title="我的评论"
            :visible.sync="drawer2"
            :direction="direction2"
            :before-close="handleClose2"
            :size="size2">
        <span>
            <el-table
                    :data="CommentTableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    max-height="500">
    <el-table-column
            prop="comment">
    </el-table-column>
      <el-table-column
              prop="time">
    </el-table-column>
  <el-table-column>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="deleteComment(scope.$index, scope.row)">删除</el-button>

      </template>
    </el-table-column>
  </el-table>

        </span>
    </el-drawer>
    <el-container>
        <!--垂直和水平导航栏-->
        <el-header style="width: 100%;"> <el-menu
                :default-active="activeIndex3"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">体育馆场地预约系统</el-menu-item>
            <el-menu-item index="2"  @click="showMyBookMes()">我的预约</el-menu-item>
            <el-menu-item index="3"  @click="showMyCommentMes()">我的评论</el-menu-item>

            <el-menu-item index="4" style="float:right" @click="toLogin()">退出登录</el-menu-item>
            <li style="float:right "><h5 style="color: #eeeeee;height: 5px;margin-top: 20px" v-model="user"> {{user.username}},欢迎您！</h5></li>
            <div style="height: 1px;float:right" >
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
            </div>
        </el-menu></el-header>
        <el-container>
            <el-aside width="350px"></el-aside>

            <!--所有场地表格-->
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item  style="font-size: larger"><h4 style="color: black">场地信息</h4></el-breadcrumb-item>
                </el-breadcrumb>
                <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="70%"color=#987cb9 SIZE=10 align="left">
                <el-table
                        :data="fieldTableData"
                        style="width: 70%; margin-top: 20px">
                    <el-table-column
                            prop="fieldpicture"
                            label="场地图片"
                            show-overflow-tooltip
                            width="160">
                        <template   slot-scope="scope">
                            <img :src="'imgs/'+scope.row.fieldpicture"  width="160" height="90" />
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="fieldname"
                            label="场地名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="fieldincharge"
                            label="负责人">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="showFieldMes(scope.row)" type="text" size="small">详细信息</el-button>
                            <el-button type="text" size="small"@click="bookField(scope.row)">预定</el-button>

                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination
                        small
                        layout="prev, pager, next"
                        :total="totalCount"
                        @current-change="handleCurrentChange"
                        :page-size="3"
                        :current-page="currentPage">
                </el-pagination>


            </el-main>
        </el-container>
    </el-container>


    <!--添加评论的表单-->
    <el-dialog
            title="评论"
            :visible.sync="AddCommentdialogVisible"
            width="40%"
    >
        <el-form ref="form" :model="commentform" label-width="80px">

            <el-form-item label="说点什么吧">
                <el-input type="textarea" v-model="commentform.comment"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即评论</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>





</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app3",

        mounted(){
            this.selectAllField();
            this.getLoginUser();

        },
        methods: {
            //
            toLogin(){
                window.location.href='login.jsp';
            },
            //查看我的所有评论
            showMyCommentMes(){
                this.drawer2=true;
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectMyCommentById?userid="+_this.user.userid,
                    method:"get"
                }).then(function (resp){
                    _this.CommentTableData=resp.data;
                })
            },
            //删除评论
            deleteComment(index,row){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/deleteComment",
                    method:"post",
                    data:row
                }).then(function (resp){
                    if(resp.data=="del_suc") {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.showMyCommentMes();
                    }
                })

            },
            //提交评论
            onSubmit(){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/addComment?fieldid="+_this.commentFieldId+"&comment="+_this.commentform.comment+"&userid="+_this.user.userid,
                    method:"get"
                }).then(function (resp){
                    if(resp.data=="add_suc") {
                        _this.$message({
                            message: '感谢您的评论',
                            type: 'success'
                        });
                        _this.AddCommentdialogVisible = false;
                    }
                })

            },
            //查看我的预约信息
            showMyBookMes(){
                this.drawer1=true;
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectMyBookMes?userid="+_this.user.userid,
                    method:"get"
                }).then(function (resp){
                    _this.bookFieldTableData=resp.data;
                })

            },
            //我的预约信息使用方法
            enterField(index, row) {
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/enterField",
                    method:"post",
                    data:row
                }).then(function (resp){
                        if(resp.data=="upd_suc") {
                            _this.$notify({
                                title: '成功',
                                message: '使用成功！',
                                type: 'success'
                            });
                            _this.selectAllField();
                            _this.showMyBookMes();
                        }

                        if(resp.data=="wrong_time") {
                            _this.$notify({
                                title: '警告',
                                message: '尚未到指定预约时间或者已过期',
                                type: 'warning'
                            });
                        }
                    if(resp.data=="already_quit") {
                        _this.$notify({
                            title: '警告',
                            message: '已退场请重新预约',
                            type: 'warning'
                        });
                    }
                    if(resp.data=="already_entry") {
                        _this.$notify({
                            title: '警告',
                            message: '已使用！',
                            type: 'warning'
                        });
                    }



                })
            },
            //我的预约信息使用方法
            quitField(index, row) {
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/quitField",
                    method:"post",
                    data:row
                }).then(function (resp){
                    if(resp.data=="upd_suc") {
                        _this.$notify({
                            title: '成功',
                            message: '退场成功！',
                            type: 'success'
                        });
                    }

                    if(resp.data=="wrong_time") {
                        _this.$notify({
                            title: '警告',
                            message: '时间已过期',
                            type: 'warning'
                        });
                    }
                    _this.selectAllField();
                    _this.showMyBookMes();
                })
            },
            //去评论
            toComment(index,row){
                this.commentform.comment='';
                this.AddCommentdialogVisible=true;
                this.commentFieldId=row.fieldid;

            },

            //获得登录的用户
            getLoginUser(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getUser",
                    method:"get"
                }).then(function (resp){
                    _this.user=resp.data;
                })
            },
            //提交预定日期
            submitbookField(){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/addMes?endtime="+_this.endTime+"&starttime="+_this.startTime+"&bookday="+_this.value2+"&fieldname="+_this.bookFieldName+"&userid="
                        +_this.user.userid+"&fieldid="+_this.bookFieldId,
                    method:"get"
                }).then(function (resp){
                    if(resp.data=="add_suc") {
                        _this.$notify({
                            title: '成功',
                            message: '提交成功,等待管理员审核',
                            type: 'success'
                        });
                        _this.bookFielddialogVisible=false;
                    }
                    if(resp.data=="same_mes") {
                        _this.$notify({
                            title: '警告',
                            message: '请勿重复提交',
                            type: 'warning'
                        });
                    }
                        if(resp.data=="conflict_mes") {
                            _this.$notify({
                                title: '警告',
                                message: '该时间段已经预定',
                                type: 'warning'
                            });
                        }
                        _this.bookFielddialogVisible=false;

                })


            },
            //打开预约弹窗选择时间
            bookField(row){
                this.bookFielddialogVisible=true;
                this.bookFieldId=row.fieldid;
                this.startTime="";
                this.endTime= '';
                this.value2= '';
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getFieldName?fieldid="+row.fieldid,
                    method:"get"
                }).then(function (resp){
                   _this.bookFieldName=resp.data;
                })
            },
            //将场地号存入session，并且跳转页面
            showFieldMes(row){

                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/saveFieldId?fieldid="+row.fieldid,
                    method:"get"
                }).then(function (resp){
                    window.location.href="detailfield.html"
                })

            },
            //折叠栏关闭
            handleClose1(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //折叠栏关闭
            handleClose2(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //页码变换后
            handleCurrentChange(val){
                this.currentPage=val;
                this.selectAllField();

            },
            //查询所有场地
            selectAllField(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectByPage?currentPage="+_this.currentPage,
                    method:"get"
                }).then(function (resp){
                    _this.fieldTableData=resp.data.rows;
                    _this.totalCount=resp.data.totalCount;
                })
            },
            //水平栏方法
            handleSelect(){
                console.log(key, keyPath);
            },


        },
        data() {
            return {
                //分页工具条模型
                totalCount:'',
                currentPage:'1',
                //我的所有评论模型
                CommentTableData:[],
                //评论的场地号模型
                commentFieldId:'',
                //评论模型
                commentform: {
                    comment: '',
            },
                //评论框展示状态
                AddCommentdialogVisible:false,
                size:'80%',
                size2:'40%',

                //我的预约信息模型
                bookFieldTableData: [],
                search: '',
                //用户姓名模型
                user:[],
                //预约的场地号模型
                bookFieldId:'',
                //预约场地的名称,
                bookFieldName:'',
                //预约开始时间和结束时间
                startTime: '',
                endTime: '',
                //选择预约哪一天
                value2: '',
                //场地table模型
                fieldTableData: [],
                /*折叠栏模型*/
                drawer1: false,
                direction1: 'btt',
                /**/
                /*折叠栏模型*/
                drawer2: false,
                direction2: 'ltr',
                /**/
                //预约场地弹窗展示状态
                bookFielddialogVisible:false,
            }
        }

    })

</script>

</body>
</html>